<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-09-22 10:01:59
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-22 11:37:19
 * @Description:
 *
-->

<template>
  <el-dialog
    class="form-dialog"
    :title="!isEdit ? '新增功率信息' : '编辑功率信息'"
    :visible="show"
    width="600px"
    top="12vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeClick"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="auto"
      size="medium"
    >
      <el-form-item label="云平台" prop="cloudPlatform">
        <el-select
          v-model="form.cloudPlatform"
          placeholder="请选择云平台"
          style="width: 100%"
          :disabled="isEdit"
        >
          <el-option
            v-for="item in cloudProviderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="云账号名称" prop="cloudAccountName">
        <el-select
          v-model="form.cloudAccountName"
          placeholder="请选择云账号"
          style="width: 100%"
          :disabled="isEdit"
          no-data-text="请先选择云平台"
          :loading="loadingCloudAccountName"
        >
          <el-option
            v-for="item in cloudAccountNameOptions"
            :key="item.cloudAccountName"
            :label="item.cloudAccountName"
            :value="item.cloudAccountName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="资源类型" prop="archType">
        <el-select
          v-model="form.archType"
          placeholder="请选择资源类型"
          style="width: 100%"
          :disabled="isEdit"
        >
          <el-option
            v-for="item in archTypeOptions"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="空闲功率" prop="pidle">
        <el-row type="flex" align="middle">
          <el-input
            v-model.trim="form.pidle"
            type="number"
            placeholder="请输入空闲功率"
          />
          <el-popover placement="right" width="300" trigger="hover">
            <p v-html="hintPidle"></p>
            <i
              slot="reference"
              class="el-icon-info icon"
              style="font-size: 18px; margin-left: 10px"
            ></i>
          </el-popover>
        </el-row>
      </el-form-item>
      <el-form-item label="最大功率" prop="pmax">
        <el-row type="flex" align="middle">
          <el-input
            v-model.trim="form.pmax"
            type="number"
            placeholder="请输入最大功率"
          />
          <el-popover placement="right" width="300" trigger="hover">
            <p v-html="hintPmax"></p>
            <i
              slot="reference"
              class="el-icon-info icon"
              style="font-size: 18px; margin-left: 10px"
            ></i>
          </el-popover>
        </el-row>
      </el-form-item>
      <el-form-item label="平均核数" prop="avgCoreNum">
        <el-row type="flex" align="middle">
          <el-input
            v-model.trim="form.avgCoreNum"
            type="number"
            placeholder="请输入平均核数"
          />
          <el-popover placement="right" width="300" trigger="hover">
            <p v-html="hintAveCore"></p>
            <i
              slot="reference"
              class="el-icon-info icon"
              style="font-size: 18px; margin-left: 10px"
            ></i>
          </el-popover>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancelClick">取 消</el-button>
      <el-button
        type="primary"
        size="small"
        :loading="confirmLoading"
        @click="confirmClick"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import resSelectorMixin from '@/views/mixin/resSelector.js'
import { debugMgmtCreate, debugMgmtUpdate } from '@/api/debugMgmt'

export default {
  name: 'FormDialog',
  mixins: [resSelectorMixin],
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    },
    // 是否编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 信息
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      archTypeOptions: ['CPU', 'GPU'],
      hintPidle:
        '输入当前私有云集群的服务器平均空闲功率，用于能耗调度算法进行评估。若不填，则无法参与能耗算法有效资源进行调度。具体参数可以参考：https://www.spec.org/power_ssj2008/results/power_ssj2008.html',
      hintPmax:
        '输入当前私有云集群的服务器平均最大功率，用于能耗调度算法进行评估。若不填，则无法参与能耗算法有效资源进行调度。具体参数可以参考：https://www.spec.org/power_ssj2008/results/power_ssj2008.html',
      hintAveCore:
        '输入当前私有云集群的服务器平均核数，用于能耗调度算法进行评估。若不填，则无法参与能耗算法有效资源进行调度。',
      privateUseProvider: false,
      cloudProviderType: 'private',
      skipGetCloudAccount: false,
      form: {
        cloudPlatform: '',
        cloudAccountName: '',
        archType: 'CPU',
        pidle: '', // 空闲功率
        pmax: '', // 最大功率
        avgCoreNum: '' // 平均核数
      },
      // 校验规则
      rules: {
        cloudPlatform: [
          { required: true, message: '请选择云平台', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ],
        pidle: [
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
            message: '空闲功率必须为正数'
          }
        ],
        pmax: [
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
            message: '最大功率必须为正数'
          }
        ],
        avgCoreNum: [
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
            message: 'avgCoreNum必须为正数'
          }
        ]
      },
      confirmLoading: false // 确定loading
    }
  },
  computed: {},
  watch: {
    /**
     * @description: 监听是否编辑
     * @return {*}
     */
    isEdit: {
      handler(newVal) {
        if (newVal) {
          this.skipGetCloudAccount = true
          this.form = Object.assign(this.form, this.info || {})
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    },
    /**
     * @description: 取消
     * @return {*}
     */
    cancelClick() {
      this.closeClick()
      this.$emit('cancel')
    },
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      // 表单校验
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          this.confirmLoading = true
          if (this.isEdit) {
            debugMgmtUpdate({
              id: this.info.id,
              pidle: this.form.pidle,
              pmax: this.form.pmax,
              avgCoreNum: this.form.avgCoreNum
            })
              .then((res) => {
                this.$emit('success', {
                  isEdit: this.isEdit
                })
                this.closeClick()
              })
              .finally(() => {
                this.confirmLoading = false
              })
          } else {
            debugMgmtCreate({
              ...this.form
            })
              .then((res) => {
                this.$emit('success', {
                  isEdit: this.isEdit
                })
                this.closeClick()
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.form-dialog {
}
</style>
